<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>哎嘿♡</title>

<link rel="stylesheet" type="text/css" href="css/style.css" />

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
$(function(){   
		  
	var interval;
	$(".container img").click(function cover(){
			$(this).addClass("zoom").fadeOut(700,append);		
			function append(){
			$(this).removeClass("zoom").appendTo(".container").show();
			var name = $(".container").children("img").first().attr("alt");
			 $(".name p").text("No "+name);
			}	
	  
	})
	
	function auto(){
			var play = $(".container").children("img").first();
			play.addClass("zoom").fadeOut(700,append);		
			function append(){
			$(this).removeClass("zoom").appendTo(".container").show();
			var name = $(this).parent().children("img").first().attr("alt");
			 $(".name p").text("No "+name);
			}
			interval = setTimeout(auto,5000);
	}
	
	$(".container img").hover(function(){
			stopPlay();
	},function(){
			interval = setTimeout(auto,5000);
	})
	
	function stopPlay(){
		clearTimeout(interval)
	}
	auto();
					
})
</script>

</head>
<audio src="music/一笑倾城-汪苏泷-9423272.mp3" id="aud" autoplay="autoplay" controls="controls" preload="auto"></audio>
<body>

<div class="container" style="margin: top-100px;"> 
  <img src="images/a1.png" alt="1" /> 
  <img src="images/a2.png" alt="2" /> 
  <img src="images/a3.png" alt="3" /> 
  <img src="images/a4.png" alt="4" /> 
  <img src="images/a5.png" alt="5" /> 
  <img src="images/a6.png" alt="6" />
  <img src="images/a7.png" alt="7" />
  <img src="images/a8.png" alt="8" />
  <img src="images/a9.png" alt="9" />
  <img src="images/a10.png" alt="10" />
  <img src="images/a11.png" alt="11" />
  <img src="images/a12.png" alt="12" />
  <img src="images/a13.png" alt="13" />
  <img src="images/a14.png" alt="14" />
  <img src="images/a15.png" alt="15" />
  <img src="images/a16.png" alt="16" />
  <img src="images/a17.png" alt="17" />
</div>
<div class="name">
<p>No 1</p>
</div>

<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>小潘永远爱着楷佳呀</p>
</div>
</body>
</html>

